<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>修改</h1>
    <div id="box">
        <!-- <input type="text" name="" id="">
        <input type="text" name="" id="">
        <input type="text" name="" id="">
        <input type="text" name="" id="">
        <input type="button" name="" id="" value="保存"> -->
    </div>
    <script src="./axios.min.js"></script>
    <script>
        // 商品列表 跳转过来  update.html?pid=xxxxx
        // 获取商品的pid
        location.search //获取搜索字段  
        console.log(location.search); // ?pid=410247&aa=23
        // pid后面的 值 

        // URLSearchParams  将搜索字段 转为对象
        let obj = new URLSearchParams(location.search)
        // get方法获取对应的参数
        let pid = obj.get('pid')
        console.log(pid);


        // 将要修改商品信息 放在输入框 
        // 根据pid 获取商品信息 （接口）

        //         根据商品id获取商品详情接口

        //  接口地址：http://jx.xuzhixiang.top/ap/api/detail.php
        // 接口请求方式：get
        // 接口参数：
        // id  商品的id
        // 使用方式
        // 获取id为1的商品的详情
        // http://jx.xuzhixiang.top/ap/api/detail.php?id=1
        // 服务器返回json数据
        let detailAPI = 'http://jx.xuzhixiang.top/ap/api/detail.php'
        let params = {
            id: pid
        };
        console.log(params);
        axios.get(detailAPI, {
                params
            })
            .then(res => {
                // 成功 
                console.log(res.data);
                let pObj = res.data.data;
                console.log(pObj);

                let html = ` <input type="text" name="" id="" value="${pObj.pname}">
                            <input type="text" name="" id="" value="${pObj.pprice}">
                            <input type="text" name="" id="" value="${pObj.pdesc}">
                            <input type="text" name="" id="" value="${pObj.pimg}">
                            <input type="button" name="" id="save-btn" value="保存">`

                let box = document.querySelector('#box')
                box.innerHTML = html;
                // 页面有了输入框  按钮
                let saveBtn = document.querySelector('#save-btn')
                console.log(saveBtn);
                saveBtn.onclick = async function () {
                    let ipts = document.querySelectorAll('#box input')
                    let pname = ipts[0].value;
                    let pprice = ipts[1].value;
                    let pdesc = ipts[2].value;
                    let pimg = ipts[3].value;
                    let params = {
                        pid,
                        pname,
                        pprice,
                        pdesc,
                        pimg
                    };
                    let url = 'http://jx.xuzhixiang.top/ap/api/goods/goods-update.php'

                    // 调用修改接口
                    // 修改商品 接口
                    // 接口地址：    http://jx.xuzhixiang.top/ap/api/goods/goods-update.php
                    //      接口请求方式：get
                    //      接口参数：

                    // pid（必选）商品的id
                    // pname（必选）商品
                    // pprice（必选）商品
                    // pdesc（必选）商品

                    let res = await axios.get(url, {
                        params
                    });
                    console.log(res.data);
                    location.href = 'index.html'

                }


            })
        // 页面有了输入框  按钮
        let saveBtn = document.querySelector('#save-btn')
        console.log(saveBtn); // null;  按钮是在请求成功以后才有
    </script>

</body>

</html>